<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 顶部 -->
        <el-col :span="24">
          <div class="grid-content bg-purple-dark"  style="text-align:right;margin-bottom:20px;">
            <el-button type="success" icon="el-icon-edit" size="small" @click="addMenus">添加菜单</el-button>
          </div>
        </el-col>
        <!-- 表格 -->
        <el-table
          default-openedss
          v-loading="loading"
         element-loading-text="给我一点时间"
          row-key="id"
          default-expand-all
          :data="tableData"
          :header-cell-style="tableHeaderStyle"
          :tree-props="defaultProps"
          style="width: 100%">
          <el-table-column
            prop="title"
            label="标题"
            width="250px"
            >
            <template slot-scope="scope">
              <i class=" iconsize el-icon-folder-opened" v-if="scope.row.childs&&scope.row.childs.length>0 && !scope.row.pid"></i>
              <i class=" iconsize el-icon-document" v-if="scope.row.num&&scope.row.num===1"></i>
              <i class=" iconsize el-icon-view" v-if="scope.row.num&&scope.row.num===2"></i>
             <span style="margin-left:5px;"> {{scope.row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="权限点代码"
            >
          </el-table-column>
        <el-table-column prop="address" label="操作" width="120">
          <template slot-scope="{row}">
            <el-button
            plain type="primary"
            icon="el-icon-edit"
            circle
            @click="editMenus(row)"></el-button>
            <el-button
            plain
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteMenus(row.id)"></el-button>
          </template>
        </el-table-column>
        </el-table>
    </el-card>
    <!-- 添加菜单弹层 -->
    <menu-add
    ref="addFormMenus"
    :text="text"
    :pageTitle="pageTitle"
    @newDataes="loadMenusList"
    @handleCloseModal="handleCloseModal" />
  </div>
</template>

<script>
import { list as menusList, remove as deleteMenusList } from '@/api/base/menus.js'
import menuAdd from '../components/menu-add.vue'
export default {
  components: { menuAdd },
  name: 'menus',
  data () {
    return {
      // 表格数据
      tableData: [],
      // 加载
      loading: true,
      defaultProps: {
        children: 'childs',
        label: 'title'
      },
      // 标题
      text: '',
      pageTitle: '菜单'
    }
  },
  created () {
    this.loadMenusList()
  },

  methods: {
    // 退出
    handleCloseModal () {
      this.$refs.addFormMenus.dialogFormH()
    },
    // 添加菜单
    addMenus () {
      this.text = '创建'
      // 显示弹层
      this.$refs.addFormMenus.dialogFormV()
      this.$refs.addFormMenus.handleResetForm()
    },
    editMenus (row) {
      this.text = '编辑'
      this.$refs.addFormMenus.dialogFormV()
      this.$refs.addFormMenus.hanldeEditForm(row.id)
      this.$refs.addFormMenus.changeType()
    },

    // 加载表格列表
    async loadMenusList () {
      const res = await menusList()
      this.tableData = res.data
      const num = 0
      this.tableData = this.menusListHandling(this.tableData, num)
      this.loading = false
    },

    // 菜单列表数据处理
    menusListHandling (data, num) {
      const newArr = []
      data.forEach(item => {
        if (item.childs) {
          newArr.push({ ...item, childs: this.menusListHandling(item.childs, num + 1), num })
        } else if (item.points) {
          newArr.push({ ...item, childs: item.points.map(item2 => ({ ...item2, num: num + 1 })), num })
        } else {
          newArr.push({ ...item, num })
        }
      })
      return newArr
    },
    // 删除菜单
    async  deleteMenus (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deleteMenusList({ id })
        this.loadMenusList()
        this.$message({
          type: 'success',
          message: '成功删除了用户!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 表头高亮
    tableHeaderStyle ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#F5F7FA;color:#1f2d3d'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 20px;
}
/deep/.el-table th.el-table__cell>.cell{
  color: #909399;
}
/deep/.el-table{
  margin-top: 20px;
  .el-icon-arrow-right:before{
    font-size: 0;
    display: none;
  }
}
/deep/.el-table [class*=el-table__row--level] .el-table__expand-icon{
  width: 0;
}
.iconsize{
  font-size: 18px;
}
</style>
